<!--<?php-->
<!--header('Content-Type:text/html;charset=utf-8');-->
<!--include 'chooseOneStock.php';-->
<!--?>-->
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        .highcharts-axis-resizer {
            stroke: #eee;
        }
        
        .highcharts-axis-resizer:hover {
            stroke: #ccc;
        }
    </style>

    <!--===========================样式================================-->
    <link rel="stylesheet" type="text/css" href="show.css" />
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>

</head>

<body>


    <div style="padding-left:250px; padding-right:40px; padding-top:10px;  padding-bottom:5px; float:left;">开始
        <input id="start" name="" type="date" value="2016-01-01" size="20" onchange="startChange()" />
    </div>
    <div style=" padding-right:50px; padding-top:10px;  padding-bottom:5px; float:left;">结束
        <input id="end" name="" type="date" value="2016-12-30" onchange="startChange()" />
    </div>
    <div style="padding-left:50px; padding-top:10px;  padding-bottom:5px;">持股周期：
        <select id="selectId" name="holdlimit" style="width: 60px" onchange="selectData()">
					<option value="2">2天</option>
					<option value="3">3天</option>
					<option value="4">4天</option>
					<option value="5">5天</option>
					<option value="6">10天</option>
				</select></div>
    <div style="padding-left:0px; padding-right:0px; padding-top:0px;  padding-bottom:10px;">
        <table id="tableId" class="table table-border table-bordered table-striped mt-20" style="width: 100%; margin-top:20px ">
            <thead>
                <tr>
                    <th>股票代码</th>
                    <th>股票简称</th>
                    <th>买入时间</th>
                    <th>卖出时间</th>
                    <th>买入价</th>
                    <th>卖出价</th>
                    <th>单次收益率</th>
                </tr>
            </thead>
            <tbody id="tab">
            </tbody>
        </table>
    </div>
    <div onmouseout="hiddened(this)" id="div2" style="position: absolute;z-index: 2000;width:600px">
        <iframe src="" id="div1" name="div1" allowTransparency="true" width="100%" height="400" scrolling="no" frameborder="0"></iframe>
    </div>
</body>
<script type="text/javascript" language="javascript">
    var indexDemoJSON = JSON.parse(window.localStorage.getItem('jsonDataHis'))
    var childJSON = indexDemoJSON[0]['day:2']
    console.log(indexDemoJSON)
    noModal(indexDemoJSON[0]['day:2'])

    function selectData() {
        console.log(document.getElementById("selectId").value)
        var dateValue = document.getElementById("selectId").value
        switch (true) {
            case dateValue == 2:
                console.log(indexDemoJSON[0])
                childJSON = indexDemoJSON[0]['day:2']
                noModal(indexDemoJSON[0]['day:2'])
                break
            case dateValue == 3:
                childJSON = indexDemoJSON[1]['day:3']
                noModal(indexDemoJSON[1]['day:3'])
                break
            case dateValue == 4:
                childJSON = indexDemoJSON[2]['day:4']
                noModal(indexDemoJSON[2]['day:4'])
                break
            case dateValue == 5:
                childJSON = indexDemoJSON[3]['day:5']
                noModal(indexDemoJSON[3]['day:5'])
                break
                // case dateValue == 6:
                //     childJSON = indexDemoJSON[4]['day:6']
                //     noModal(indexDemoJSON[4]['day:6'])
                //     break
        }

    }

    function hiddened(x) {
        document.getElementById("div1").innerHTML = '';
        document.getElementById("div1").src = '';

    }
    //样式 调整位置
    var iWidth = 500
    var iHeight = 450
    var iTop = (window.screen.availHeight - 30 - iHeight) / 2
    var iLeft = (window.screen.availWidth - 10 - iWidth - 800) / 2
    document.getElementById("div2").style.left = iLeft + 'px'
    document.getElementById("div2").style.top = iTop + 'px'

    //悬停功能
    function rowJson(dataJSON) {
        console.log('iiii', dataJSON.parentNode.parentNode.childNodes[0].innerHTML, dataJSON.parentNode.parentNode.childNodes[2].innerHTML);
        //负责鼠标悬停 抓取"卖出时间、买入时间、股票代码"的功能.
        var SellTime = dataJSON.parentNode.parentNode.childNodes[3].innerHTML
        var ts_code = dataJSON.parentNode.parentNode.childNodes[0].innerHTML
        var BuyTime = dataJSON.parentNode.parentNode.childNodes[2].innerHTML
        var name = dataJSON.innerHTML
        document.getElementById("div1").src = "3.php?ts_code=" + ts_code + "&BuyTime=" + BuyTime + "&SellTime=" + SellTime + "&name=" + name
    }


    function noModal(json) {
        $("tbody tr").remove()
        console.log(json)
        var dataJSON = json
        for (var i = 0; i < dataJSON.length; i++) {
            $("tbody").append("<tr align='center'>" +
                '<td>' + dataJSON[i].ts_code + '</td>' +
                '<td>' + '<a href="#" onmouseover="rowJson(this)">' + dataJSON[i].name + '</a>' + '</td>' +
                '<td>' + dataJSON[i].BuyTime + '</td>' +
                '<td>' + dataJSON[i].SellTime + '</td>' +
                '<td>' + dataJSON[i].Open + '</td>' +
                '<td>' + dataJSON[i].Close + '</td>' +
                '<td>' + dataJSON[i].shouyilv + '</td>' +
                "</tr>")
        }

    }

    function startChange(e) {
        var tempJSON = []

        var starTime = document.getElementById("start").value
        var time1 = new Date(starTime).valueOf()
        console.log(time1)
            //    console.log(childJSON)
        var endTime = document.getElementById("end").value
        var time2 = new Date(endTime).valueOf()

        childJSON.forEach((item, index) => {
            var time3 = new Date(item.BuyTime).valueOf()
                // var time4 = new Date(item.SellTime).valueOf()
            if (time1 <= time3 && time3 <= time2) {
                tempJSON.push(item)
                console.log('788', tempJSON)

            }
        })
        noModal(tempJSON)

    }
</script>

</html>